<template>
  <!--  订单簿窗口  -->
  <el-form label-width="80px">
    <el-form-item>
      <h4 style="color: #F56C6C;font-size: 24px"> 行情时间 <i class="el-icon-timer"></i> {{ hqTime }}</h4>
    </el-form-item>
    <el-form-item>
      <div class="orderBook">
        <el-row v-for="item in sell" :key="item.name">
          <el-col :span="6">{{ item.name }}</el-col>
          <el-col :span="6">{{ item.price | filterEmpty }}</el-col>
          <el-col :span="6">
            <div class="volume-ratio">
              <div class="sell" v-bind:style="{width: item.width+'%'}"/>
            </div>
          </el-col>
          <el-col :span="6">{{ item.volume | filterEmpty }}</el-col>
        </el-row>
      </div>

      <div class="orderBook" style="border-top: none;">
        <el-row v-for="item in buy" :key="item.name">
          <el-col :span="6">{{ item.name }}</el-col>
          <el-col :span="6">{{ item.price | filterEmpty }}</el-col>
          <el-col :span="6">
            <div class="volume-ratio">
              <div class="buy" v-bind:style="{width: item.width+'%'}"/>
            </div>
          </el-col>
          <el-col :span="6">{{ item.volume | filterEmpty }}</el-col>
        </el-row>
      </div>
    </el-form-item>

  </el-form>
</template>

<script>

import moment from "moment";
export default {
  name: "OrderBook",
  data() {
    return {
      hqTime: '--:--:--',
      hqTimestamp: 0,
      timer: null,
      sell: [
        {
          name: "卖五",
          price: -1,
          volume: -1,
          width: 1,
        },
        {
          name: "卖四",
          price: -1,
          volume: -1,
          width: 1,
        },
        {
          name: "卖三",
          price: -1,
          volume: -1,
          width: 1,
        },
        {
          name: "卖二",
          price: -1,
          volume: -1,
          width: 1,
        },
        {
          name: "卖一",
          price: -1,
          volume: -1,
          width: 1,
        }
      ],
      buy: [
        {
          name: "买一",
          price: -1,
          volume: -1,
          width: 1,
        },
        {
          name: "买二",
          price: -1,
          volume: -1,
          width: 1,
        },
        {
          name: "买三",
          price: -1,
          volume: -1,
          width: 1,
        },
        {
          name: "买四",
          price: -1,
          volume: -1,
          width: 1,
        },
        {
          name: "买五",
          price: -1,
          volume: -1,
          width: 1,
        },
      ],

    }
  },
  mounted() {
    let that= this
    this.timer = setInterval( () => {
      let _today = moment();
      that.hqTime = _today.format('HH:mm:ss')
    }, 1000)
  },
  methods : {
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer)
      }
    }
  },
  filters: {
    filterEmpty(value) {
      if (value === -1) {
        return '-';
      } else {
        return value;
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.orderBook {
  border: 1px solid #909399;;
  margin-left: 5%;
  margin-right: 5%;

  .el-row {
    .el-col {
      height: 35px;
      line-height: 35px;
    }
  }

  .volume-ratio {
    margin: 10px auto;
    border: none;

    .sell {
      height: 10px;
      background: #67C23A;
    }

    .buy {
      height: 10px;
      background: #F56C6C;
    }
  }
}
</style>
